<script lang="ts" setup>
import { ref, reactive, toRaw, toRefs, onMounted } from "vue";
import { ElTable } from 'element-plus'
import { Delete, Edit, Search, Share, Upload, ArrowLeft, CaretBottom } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import type { FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import router from "../../router"
import { ShopHook } from "../../hooks/shopManageHooks";

let route=useRoute()
const shopHook=ShopHook();
let updateId=route.query.id;
let type=route.query.type;

onMounted(()=>{
    if(updateId){
        shopHook.getById(updateId,function(data:any){
            ruleForm.value=data;
        })
    }
    
})
const pageReturn = () => {
  router.go(-1);
};

//表单的相关
const formSize=ref("default");
const ruleFormRef=ref<FormInstance>();

interface addRule{
    id?:string
    categoryId?:string,
    spu_type_id?:string,
    name?:string,
    introduce?:string,
    tag?:string,
    price?:string,
    sales?:string
}
const ruleForm=ref<object>({
    categoryId:"",
    spu_type_id:"",
    name:"",
    introduce:"",
    tag:"0",
    price:"",
    sales:""
})

//表单验证规则
const rules=reactive<FormRules>({
    categoryId:[{required:true,message:"输入不能为空!",trigger:"blur"}],
    spu_type_id:[{required:true,message:"输入不能为空!",trigger:"blur"}],
    name:[{required:true,message:"输入不能为空!",trigger:"blur"}],
    introduce:[{required:true,message:"输入不能为空!",trigger:"blur"}],
    tag:[{required:true,message:"输入不能为空!",trigger:"blur"}],
    price:[{required:true,message:"输入不能为空!",trigger:"blur"}],
    sales:[{required:true,message:"输入不能为空!",trigger:"blur"}]
})

//修改submitForm()函数
const submitForm=async(formEl:FormInstance|undefined)=>{
   //检查表单有没有
   if(!formEl) return;
   try{
    //使用vue.js promise风格验证表单
    await formEl.validate();
    //处理表单内容打印出来
    let formdata={...ruleForm.value} as addRule;
    if(type=="1"){
        formdata.id=String(updateId);
        shopHook.update_Shop(formdata);
    }else{
        shopHook.add_shop(formdata)
    }
    console.log("submit",formdata);
   }catch ({ errors, fields }) {
    // 打印错误信息到控制台
    console.log("error submit!", errors, fields);
  }
}



const imageUrl = ref('')
const input = ref('')
const input2 = ref('')
const value = ref('')
const textarea = ref('')
const checkboxGroup2 = ref([''])
const dialogs = ['减肥', '健身',]
const options=[
    {value:"1",label:"虚拟商品"},
    {value:"2",label:"实物商品"},
    {value:"3",label:"积分兑换商品"},
    ]
const radio = ref('')
const fits = [ 'cover']
const url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('上传文件格式必须为JPG')
    return false
  }  else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片必须小于2MB')
    return false
  }
  return true
}
</script>


<template>
    <div>
        <el-row>
             <el-col :span="24">
                <div class="addTitle">
                    <span>商品添加编辑</span>
                     <el-button plain @click="pageReturn()"><el-icon><ArrowLeft /></el-icon>返回</el-button>
                </div>
            </el-col>
        </el-row>
  <el-divider />


     <div>
    <el-form ref="ruleFormRef" :model.sync="ruleForm" :rules="rules" label-width="200px" class="demo-ruleForm" :size="formSize" status-icon>
        
              
                    <el-form-item label="商品分类:" prop="category_id">
                     <el-select v-model="ruleForm.categoryId" clearable class="inSearch" placeholder="请选择商品分类" >
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>      
                    </el-form-item>
         

                    <el-form-item label="商品类型:" prop="spu_type_id">
                     <el-radio-group v-model="ruleForm.spu_type_id">
                       <el-radio :label="1">虚拟商品</el-radio>
                       <el-radio :label="2">实物商品</el-radio>
                       <el-radio :label="3">积分兑换商品</el-radio>
                    </el-radio-group>
                    </el-form-item>


                    <el-form-item label="商品名称:" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入商品名称" clearable class="inName"/>
                    </el-form-item>

                    <el-form-item label="价格:" prop="price">
                    <el-input v-model="ruleForm.price" placeholder="请输入商品价格" clearable class="inName"/>
                    </el-form-item>

                    <el-form-item label="销量:" prop="sales">
                    <el-input v-model="ruleForm.sales" placeholder="请输入商品销量" clearable class="inName"/>
                    </el-form-item>


                    <el-form-item label="商品介绍:" prop="introduce">
                    <el-input v-model="ruleForm.introduce" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="商品简介" class="shopIntroduce"/>
                    </el-form-item>


                    <el-form-item label="标签:" prop="tag">
                    <el-checkbox-group v-model="ruleForm.tag" >
                       <el-checkbox-button v-for="dialog in dialogs" :key="dialog" :label="dialog" class="check">{{  dialog  }}</el-checkbox-button>
                    </el-checkbox-group>
                    <el-input v-model="input2" placeholder="请输入标签名称" clearable class="inDia"/>
                     <el-button type="primary">添加</el-button>
                    </el-form-item>

                     <el-form-item>
                         <el-button type="primary" :data-id="0" @click="submitForm(ruleFormRef)">  保存
                         </el-button>
                     </el-form-item>          

            <el-row>
                <el-col :span="24">
                    <div class="limit">
                        <span>选择最多不超过5个标签</span>
                    </div>
                </el-col>
            </el-row>

         
                        
           

      </el-form>
        

      </div>
        

    </div>
</template>


<style scoped>
.addTitle{
    background-color: #f3f3f3;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.bulk{
    margin-left: 150px;
    margin-top: 20px;
}
.typ{
    margin-left: 150px;
    margin-top: 20px;
}
.xuNi{
    margin-left: 10px;
}
.inName{
    width: 300px;
    margin-left: 10px;
}
.Name{
    margin-left: 150px;
    margin-top: 20px;
}
.shopIntroduce{
    width: 400px;
    margin-left: 10px;
}
.introduce{
    margin-left: 150px;
    margin-top: 20px;
    height: 100px;
    display: flex;
}
.dia{
    margin-left: 150px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.check{
    margin-left: 10px;
}
.inSearch{
    margin-left: 10px;
}
.inDia{
    width: 200px;
    margin-left: 20px;
    margin-right: 10px;
}
.limit{
    margin-top: 20px;
    margin-left: 225px;
    color: rgb(153,153,153);
    font-size: 13px;
    font-weight: 400;
}
.headImg{
    margin-left: 150px;
    margin-top: 20px;
    display: flex;
}
.block{
    border: 1px solid #CCCCCC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    margin-left: 10px;
}
.boxImg{
    display: flex;
}
.load{
    margin-left: 10px;
    margin-top: 15px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    width: 178px;
    height: 178px;
    display: block;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.load:hover {
  border-color: var(--el-color-primary);
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>